<?php defined('slim') or exit('访问不合法');?>
<!DOCTYPE html>
<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<style>
    * {
        box-sizing: border-box;
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 300;
    }
    .floated-parent {
        overflow: auto;
    }
    section {
        width: 100%;
        height: 100vh;
        background-color: #EFEFEF;
    }
    #message-box {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        -webkit-box-shadow: 0px 0px 59px 5px rgba(0, 0, 0, 0.58);
        -moz-box-shadow: 0px 0px 59px 5px rgba(0, 0, 0, 0.18);
        box-shadow: 0px 0px 59px 5px rgba(0, 0, 0, 0.18);
        overflow: hidden;
        width: 70%;
        height: 70%;
        max-width: 1000px;
        background-color: white;
    }
    nav {
        display: inline-block;
        float: left;
        width: 15%;
        height: 100%;
        padding: 20px;
        text-align: center;
        background-color: #777;
        overflow: scroll;
    }
    @media only screen and (max-width: 1000px) {
        nav {
            width: 25%;
        }
    }
    @media only screen and (max-width: 600px) {
        nav {
            width: 30%;
        }
    }
    ::-webkit-scrollbar {
        width: 0px;
        /* remove scrollbar space */

        background: transparent;
        /* optional: just make scrollbar invisible */
    }
    .message-area {
        display: inline-block;
        float: left;
        width: 85%;
        height: 100%;
    }
    @media only screen and (max-width: 1000px) {
        .message-area {
            width: 75%;
        }
    }
    @media only screen and (max-width: 600px) {
        .message-area {
            width: 70%;
        }
    }
    .message-area #current-contact {
        width: 100%;
        height: 15%;
        border-bottom: 1px solid grey;
    }
    .message-area #current-contact h3 {
        text-align: center;
        text-transform: uppercase;
        font-weight: 300;
        letter-spacing: .1em;
        line-height: 75px;
        margin: auto;
    }
    .message-area #conversation-area {
        height: 75%;
        width: 100%;
        padding: 10px 40px;
        overflow: scroll;
    }
    @media only screen and (max-width: 600px) {
        .message-area #conversation-area {
            padding: 10px;
        }
    }
    .message-area #conversation-area .conversation {
        display: none;
    }
    .message-area #conversation-area .current {
        display: initial;
    }
    .message-area #conversation-area .text-bubble {
        width: 50%;
        padding: 20px 10px;
        margin: 7px;
        border-radius: 5px;
    }
    @media only screen and (max-width: 600px) {
        .message-area #conversation-area .text-bubble {
            width: 80%;
        }
    }
    .message-area #conversation-area .recieved {
        background-color: #1abc9c;
        color: white;
        clear: both;
    }
    .message-area #conversation-area .sent {
        background-color: #EEEEEE;
        color: black;
        float: right;
        clear: both;
    }
    .message-area #text-input {
        height: 10%;
        width: 100%;
    }
    .message-area #text-input input {
        width: 100%;
        height: 100%;
        resize: none;
        border: none;
        border-top: 1px solid black;
        padding: 20px 20px 20px 50px;
    }
    .message-area #text-input input:focus {
        outline: 0;
    }
    .chip {
        display: block;
        width: 80%;
        margin: 15px auto;
        border-radius: 50%;
        border: 3px solid white;
        color:#eeeeee;
        -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.87, -0.41, 0.19, 1.44);
        transition: transform 0.2s cubic-bezier(0.87, -0.41, 0.19, 1.44);
    }
    .chip:hover {
        transform: scale(1.05, 1.05);
    }
</style>
<section>
    <div id="message-box">
        <nav>
            <div class="contact chip" id="">群聊</div>
            <div class="contact chip">郭无双</div>
            <div class="contact chip">郭无双</div>
            <img src="https://randomuser.me/api/portraits/men/49.jpg" class="contact chip" id="chip-1">
            <img src="https://randomuser.me/api/portraits/women/24.jpg" class="contact chip" id="chip-2">
            <img src="https://randomuser.me/api/portraits/men/66.jpg" class="contact chip" id="chip-3">
            <img src="https://randomuser.me/api/portraits/women/15.jpg" class="contact chip" id="chip-4">
        </nav>
        <div class="message-area">
            <div id="current-contact">
                <h3>Dave</h3>
            </div>
            <div id="conversation-area">
                <div class="conversation current" id="convo-1" title="Dave">
                    <p class="text-bubble recieved">Hey dude, what's up?</p>
                    <p class="text-bubble recieved">What are your plans tonight?</p>
                    <p class="text-bubble sent">Not much! Gonna watch these dota finals probably.</p>
                    <p class="text-bubble recieved">Sounds good!</p>
                </div>

                <div class="conversation" id="convo-2" title="Sarah">
                    <p class="text-bubble recieved">Wart Wart Wart</p>
                </div>

                <div class="conversation" id="convo-3" title="Tanvir">
                    <p class="text-bubble recieved">OMG r u watching this, bae?</p>
                    <p class="text-bubble sent">New phone, who dis?</p>
                </div>

                <div class="conversation" id="convo-4" title="Elise">
                    <p class="text-bubble recieved">Hi, is this dog?</p>
                    <p class="text-bubble sent">Uh, yeah?</p>
                    <p class="text-bubble recieved">What's up dog?</p>
                </div>
            </div>
            <form action="#" id="text-input">
                <input type="text" name="txt" onkeypress="handle(event)" id="text-content" autocomplete="off" placeholder="Type message..." />
            </form>
        </div>
    </div>
</section>
<script>
    function handle(e) {
        if (e.keyCode === 13) {
            var content = document.getElementById("text-content").value;
            console.log(content);
            var html = "<p class='text-bubble sent'>" + content + "</p>";
            $(html).appendTo(".current");

            var objDiv = document.getElementById("conversation-area");
            objDiv.scrollTop = objDiv.scrollHeight;
            document.getElementById("text-content").value = "";

        }

        return false;
    }
    $("#text-input").submit(function(e) {
        e.preventDefault();
    });


    $(".chip").click(function() {
        var selector = $(this).attr('id');
        var name = "";
        selector = selector.slice(-1);
        selector = "convo-" + selector;
        $(".conversation").removeClass('current');
        $("#" + selector).addClass("current");
        name = $("#" + selector).attr('title');
        $("#current-contact h3").html(name);
    });
</script>
